@import '../../style/font.scss';
@import '../../style/color.scss';
@import '../../style/onepx';

.feedback-message-page{
  background-color: #f5f5f9;
  display: flex;
  flex-direction: column;

  .feedback-message-header{
    height: 80px;
   // border-bottom: solid 1px $list-line-color;
    @include onepx($list-line-color, bottom);
    background-color: $background-content-color;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: $regular-font-family;
    @include font-dpr(30px);
    color: $title-text-color;
    letter-spacing: 0;
    line-height: 44px;
    padding-left:30px;
    position:absolute;
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index:10;
    box-sizing: border-box;
  }

  .feedback-message-body{
    padding-top:80px;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 100px;

    .message-item-container{
      padding:19px 20px 0;

      .message-item{
        background: $main-background-color;
      //  border: 1px solid $list-line-color;
        @include onepx($list-line-color, all, after);
        //border-radius: 12px;
        padding:24px 40px;

        .message-content{
          font-family: $regular-font-family;
          @include font-dpr(30px);
          color: $message-content-color;
          letter-spacing: 0;
          line-height: 46px;
          justify-content: flex-start;
          word-break: break-all;
        }
        .message-time{
          text-align: right;
          font-family: $regular-font-family;
          @include font-dpr(28px);
          color: $message-time-color;
          letter-spacing: 0;
          line-height: 28px;
          margin-top:10px;
        }
      }
    }
  }
  .feedback-message-footer{
    position: fixed;
    z-index: 1000;
    width: 100%;
    bottom: 0;
    background-color: $background-content-color;
    display: flex;
    flex-direction: row;
    align-items: center;
  //  padding:19px;
    padding: 19px 30px 12px;
   // border-top: solid 1px $list-line-color;
    @include onepx($list-line-color, top);
    box-sizing: border-box;

    .textarea-content{
      width:80%;
      height: 65px;
    }

    .button{
      background: $button-background-color;
      border-radius: 6px;
      width:100px;
      height:60px;
      line-height: 60px;
      border-color: $button-background-color;
      margin-left: 20px;

      font-family: $regular-font-family;
      @include font-dpr(30px);
      color: $button-font-color;
    }
    .am-list .am-list-body{
      background-image: none;
    }
    .button.am-button.am-button-disabled {
      background-color: #dddddd;
      border: solid 1px #dddddd;
    }
    .am-list {
      .am-list-body {
        padding: 0;
        border: none;

        .am-list-item {
          min-height: 0;
        }
      }

      .am-list-item.am-textarea-item {
        padding-left: 0;
        padding-right: 0;

         .am-textarea-control {
           padding: 0;
           border:none;
         }
      }
    }
    .am-list-item.am-textarea-item .am-textarea-control:after{
     background-image: none;
    }
    .am-list-item,.am-textarea-item,.am-textarea-focus{
    //  border-bottom: solid 1px #999999;
      @include onepx($tips-text-color, bottom);
    //  padding:0 5px;
    }
    .am-list-item.am-textarea-item {
      height: auto;

      .am-textarea-control {
        height: auto;

        textarea {
          height: 65px;
          @include font-dpr(32px);
          line-height: 1em;
        }
      }

      .am-textarea-count {
        @include font-dpr(32px);
      }
    }
  }
}
